<!-- 路线图组件 -->
<template>
  <div class="node-wrapper" @click="closeDetails">
    <div class="node-box"
         @click="handleClick"
    >
      {{ props.node.name }}
      <span v-if="props.node.status" class="status-dot"></span>
    </div>

    <div v-if="node.children" class="children">
      <road-map
          v-for="child in node.children"
          :key="child.id"
          :node="child"
      />
    </div>

    <!-- 右侧详情面板 -->
    <div v-if="selectedItem" class="details-panel details-panel-visible">
      <div class="details-content">
        <h2>{{ selectedItem.title }}</h2>
        <p>{{ selectedItem.content }}</p>
        <ul>
          <li v-for="(link, lIndex) in selectedItem.links" :key="'link-' + lIndex">
            <a :href="link.url" target="_blank">{{ link.title }}</a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 模糊背景 -->
    <div v-if="selectedItem" class="blur-overlay"></div>
  </div>
</template>

<script lang="js">
export default {
  name: 'RoadMap'
}
</script>

<script lang="js" setup>
import { ref } from 'vue';

const selectedItem = ref(null)

const closeDetails = () => selectedItem.value = null;

const props = defineProps({
  node: {
    type: {}
  }
});
// 点击事件处理
const handleClick = (node) => {
  // 这里可以添加自定义逻辑
  console.log('Clicked node:', node)

  selectedItem.value = {
    title: '标题',
    content: '内容',
    links: [
      {
        title: '链接标题1',
        url: 'https://www.baidu.com'
      },
      {
        title: '链接标题2',
        url: 'https://www.baidu.com'
      }
    ]
  }

  // 示例：切换完成状态
  node.status = !node.status
}
</script>
<style lang="scss" scoped>
.node-wrapper {
  margin-left: 30px;
  padding: 5px 0;
}

.node-box {
  padding: 8px 15px;
  margin: 5px 0;
  border: 2px solid #3498db;
  border-radius: 8px;
  cursor: pointer;
  background: white;
  transition: 0.3s;
  display: inline-block;
}
.node-box:hover {
  background: #f0f8ff;
  transform: translateY(-2px);
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #2ecc71;
  border-radius: 50%;
  margin-left: 8px;
}

.details-panel {
  position: fixed;
  top: 0;
  right: -600px; /* 初始隐藏 */
  width: 600px; /* 增加宽度 */
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease-in-out;
  z-index: 1000;
  overflow-y: auto;
}

.details-panel-visible {
  right: 0; /* 显示时滑入 */
}

.details-content {
  padding: 20px;
}

.blur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 999;
}
</style>
